<template>
  <div class="app-container">
    <el-row>
      <!-- 日志区域 -->
      <el-card>
        <div ref="container" style="overflow-y: scroll; background: #333; color: #aaa; min-height: 300px;">
          <div style="position: fixed; top: 50px; right: 50px">
            <el-button class="filter-item" type="primary" round icon="el-icon-video-play" :disabled="started" @click="handleStart">
              开始查询
            </el-button>
            <el-button class="filter-item m-l-10" type="danger" round icon="el-icon-video-pause" :disabled="!started" @click="handleStop">
              停止查询
            </el-button>
          </div>
          <div ref="container_div">
            <div v-for="(log, index) in logData" :key="index">
              {{ log.timestamp + ' ' + log.level + ' --- [' + log.threadName + '] ' + log.className + ' :' }}
              <p :class="log.level === 'ERROR' ? 'red' : ''" v-html="log.exception" /><br>
            </div>
          </div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { startPollLog, stopPollLog } from '@/api/tool/websocket'
import { getAuthenticationHeader } from '@/utils/store'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

export default {
  name: 'PollLog',
  data() {
    return {
      stompClient: undefined,
      logData: [],
      started: false
    }
  },
  mounted() {
    this.init()
  },
  destroyed() {
    this.handleClose()
  },
  methods: {
    init() {
      let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      height = height - this.$refs.container.getBoundingClientRect().top - 20
      this.$refs.container.style.height = height + 'px'
      this.$nextTick(() => {
        this.openSocket()
      })
    },
    openSocket() {
      if (this.stompClient === undefined) {
        const socket = new SockJS(this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/stomp`)
        // 使用STMOP子协议的WebSocket客户端
        this.stompClient = Stomp.over(socket)
        const headers = getAuthenticationHeader()

        // 连接WebSocket服务端
        this.stompClient.connect(headers, (frame) => {
          this.stompClient.subscribe('/topic/pullLogger', (event) => {
            const content = JSON.parse(event.body)
            if (!content.exception) {
              content.exception = content.body
            }
            this.logData.push({
              timestamp: content.timestamp,
              level: content.level,
              threadName: content.threadName,
              className: content.className,
              exception: content.exception
            })
            this.$nextTick(function() {
              this.$refs.container.scrollTop = this.$refs.container.scrollHeight
            })
          }, headers)
        }, e => {})
      }
    },
    handleStart() {
      startPollLog().then(response => {
        this.started = true
      }).catch(e => {})
    },
    handleStop() {
      stopPollLog().then(response => {
        this.started = false
      }).catch(e => {})
    },
    handleClose() {
      if (this.started) {
        this.handleStop()
      }
      if (this.stompClient) {
        this.stompClient.disconnect()
        this.stompClient = undefined
      }
      this.$emit('handle-close')
    }
  }
}
</script>

<style>
.app-container{
  height: 100%;
}
</style>
